<template>
  <div class="all">
    <div class="container">
      <vue-scroll :ops="scollOptions">
        <div class="create-developer-table">
          <div class="header">
            <el-form
              slot="body"
              :inline="true"
              :model="searchForm"
              label-position="left"
              class="search-form"
            >
              <el-form-item label="订单编号:">
                <el-input
                  v-model="searchForm.order_num"
                  placeholder="请输入"
                  clearable
                  size="mini"
                />
              </el-form-item>
              <el-form-item label="订单状态:">
                <el-select
                  size="mini"
                  clearable
                  v-model="searchForm.state"
                  placeholder="请选择"
                >
                  <el-option label="已下单" :value="1"> </el-option>
                  <el-option label="已发货" :value="2"> </el-option>
                  <el-option label="出租中" :value="3"> </el-option>
                  <el-option label="交易完成" :value="4"> </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="">
                <el-button
                  type="primary"
                  size="mini"
                  @click.native="getTableData"
                >
                  搜索
                </el-button>
              </el-form-item>
            </el-form>
          </div>
          <div class="developerTable">
            <page-table
              ref="pageTable"
              :table-data="table.tbodyData"
              :header-data="table.headerData"
              :page-data="pageData"
              cell-key=""
              @handle-current-change="handleCurrentChange"
              @handle-size-change="handleSizeChange"
            >
              <template slot="operate" slot-scope="scope">
                <span>
                  <a
                    v-if="
                      userData.id === scope.data.seller_id &&
                      scope.data.state == 1
                    "
                    class="text"
                    @click="release(scope.data, 2)"
                    >发货</a
                  >
                  <a
                    v-if="
                      userData.id === scope.data.buyer_id &&
                      scope.data.state == 2
                    "
                    class="text"
                    @click="release(scope.data, 3)"
                    >已收货</a
                  >
                  <a
                    v-if="
                      userData.id === scope.data.buyer_id &&
                      scope.data.state == 3
                    "
                    class="text"
                    @click="release(scope.data, 4)"
                    >归还</a
                  >
                </span>
              </template>
              <template slot="state" slot-scope="scope">
                <span>
                  {{
                    scope.data.state === 1
                      ? "已下单"
                      : scope.data.state === 2
                      ? "已发货"
                      : scope.data.state === 3
                      ? "出租中"
                      : "交易完成"
                  }}
                </span>
              </template>
              <template slot="goods_name" slot-scope="scope">
                <span
                  style="cursor: pointer; color: #3179d6"
                  @click="look(scope.data)"
                >
                  {{ scope.data.goods_name }}
                </span>
              </template>
            </page-table>
          </div>
        </div>
      </vue-scroll>
    </div>
    <el-dialog
      title="查看"
      :visible.sync="dialogVisible"
      width="20%"
      :before-close="handleClose"
    >
      <el-form :inline="true" :model="obj" :rules="rules" ref="objForm">
        <el-form-item label="商品名称：" prop="name">
          <el-input
            disabled
            v-model="obj.name"
            placeholder="请输入商品名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="商品类别：" prop="category_id">
          <el-select
            disabled
            size="mini"
            v-model="obj.category_id"
            placeholder="请选择商品类别"
          >
            <el-option
              v-for="item in categoryList"
              :key="item.id"
              :label="item.category_name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="商品价格：" prop="price">
          <el-input
            disabled
            v-model="obj.price"
            placeholder="请输入商品价格"
          ></el-input>
        </el-form-item>
        <el-form-item label="商品成色：" prop="fineness">
          <el-select
            size="mini"
            v-model="obj.fineness"
            placeholder="请选择商品成色"
            disabled
          >
            <el-option
              v-for="item in finenessList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="商品图片：">
          <el-image
            style="width: 100px; height: 100px"
            :src="obj.goods_img"
            :fit="fit"
          ></el-image>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false" size="mini">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false" size="mini"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
<script>
import PageTable from "@/components/table/PageTable";
import { getOrderList, updateOrder } from "@/api/order/index";
import { getCategoryNameList } from "@/api/developerServe/index";
import { formatDateTime } from "@/utils/tools";
export default {
  components: {
    PageTable,
  },
  data() {
    return {
      finenessList: [
        {
          id: 1,
          name: "基本报废",
        },
        {
          id: 2,
          name: "使用功能受损",
        },
        {
          id: 3,
          name: "破损严重",
        },
        {
          id: 4,
          name: "有破损",
        },
        {
          id: 5,
          name: "轻微破损",
        },
        {
          id: 6,
          name: "有明显擦痕",
        },
        {
          id: 7,
          name: "有轻微擦痕",
        },
        {
          id: 8,
          name: "有使用痕迹",
        },
        {
          id: 9,
          name: "基本全新",
        },
        {
          id: 10,
          name: "全新",
        },
      ],
      searchForm: {
        name: "",
        category_id: "",
        state: "",
        review_status: "",
      },
      table: {
        headerData: [
          {
            prop: "order_num",
            label: "订单ID",
            align: "center",
            headerAlign: "center",
          },
          {
            slot: "goods_name",
            label: "商品名称",
            align: "center",
            headerAlign: "center",
          },

          {
            slot: "state",
            label: "订单状态",
            align: "center",
            headerAlign: "center",
          },
          {
            prop: "buyer_name",
            label: "买家姓名",
            align: "center",
            headerAlign: "center",
          },

          {
            prop: "days",
            label: "租借天数",
            align: "center",
            headerAlign: "center",
          },
          {
            prop: "seller_name",
            label: "商家姓名",
            align: "center",
            headerAlign: "center",
          },
          {
            prop: "lease_time",
            label: "下单时间",
            align: "center",
            headerAlign: "center",
          },
          {
            label: "操作",
            align: "center",
            headerAlign: "center",
            slot: "operate",
          },
        ],
        tbodyData: [],
        handdleId: "",
      },
      pageData: {
        // 翻页数据
        total: 0, // 总条数
        page: 1,
        pageSize: 10,
        totalPage: 0, // 总页数
      },
      params: {
        page: 1,
        pageSize: 10,
      },
      /**
       * 滚动条样式
       */
      scollOptions: {
        scrollPanel: {
          scrollingX: false,
          scrollingY: true,
        },
        vuescroll: {
          mode: "native",
          sizeStrategy: "percent",
          detectResize: true,
          zooming: false,
        },
        bar: {
          onlyShowBarOnScroll: false,
          background: "#dedede",
          opacity: 1,
        },
      },
      dialogVisible: false,
      obj: {
        name: "",
        category_id: "",
        price: "",
        fineness: "",
        goods_img: "",
      },
      userData: {},
      title: "新增",
      categoryList: [],
      imageUrl: "",
    };
  },
  created() {},
  mounted() {
    this.userData = localStorage.getItem("userData");
    this.userData = JSON.parse(this.userData);
    this.getCategoryNameList();
    this.getTableData();
  },
  methods: {
    getCategoryNameList() {
      getCategoryNameList().then((res) => {
        this.categoryList = res.data;
      });
    },
    handleClose(done) {
      this.dialogVisible = false;
    },
    async release(obj, val) {
      await updateOrder({
        id: obj.id,
        state: val,
      });
      this.$message({
        type: "success",
        message: "操作成功!",
      });
      this.getTableData();
    },
    look(obj) {
      this.obj = { ...obj.goodlist[0] };
      this.dialogVisible = true;
    },
    /** 获取列表数据 */
    getTableData() {
      this.searchForm.currPage = this.pageData.page;
      this.searchForm.pageSize = this.pageData.pageSize;
      return getOrderList({
        ...this.searchForm,
        user_id: this.userData.name == "admin" ? null : this.userData.id,
      })
        .then((res) => {
          this.table.tbodyData = res.data.map((item) => {
            return {
              ...item,
              lease_time: formatDateTime(item.lease_time),
              seller_name:
                item.sellerlist.length != 0 ? item.sellerlist[0].name : "",
              goods_name:
                item.goodlist.length != 0 ? item.goodlist[0].name : "",
              buyer_name:
                item.buyerlist.length != 0 ? item.buyerlist[0].name : "",
            };
          });
          this.pageData = {
            ...this.pageData,
            total: res.count,
            totalPage:
              res.count % this.pageData.pageSize === 0
                ? res.count / this.pageData.pageSize
                : parseInt(res.count / this.pageData.pageSize) + 1,
          };
        })
        .catch(() => {});
    },
    /** 跳转至第几页的操作 */
    handleCurrentChange(val) {
      this.params.page = val;
      this.getTableData();
    },
    /** 每页条数改变 */
    handleSizeChange(val) {
      this.pageData.pageSize = val;
      this.getTableData();
    },
  },
};
</script>
<style lang="scss" scoped>
.all {
  width: 100%;
  height: 100%;

  .container {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    .create-developer-table {
      background-color: #ffffff;
      padding: 15px;
      .header {
        margin-bottom: 20px;
        line-height: 60px;
        /deep/ .el-form {
          .el-form-item__content {
            vertical-align: middle;
            .el-range-editor.el-input__inner {
              height: 28px;
              line-height: 28px;
              vertical-align: middle;
              .el-range__icon,
              .el-range-separator,
              .el-range__close-icon {
                line-height: 23px;
              }
            }
          }
        }
      }
      .developerTable {
        .text {
          cursor: pointer;
          color: #3179d6;
          margin: 0 5px;
        }
      }
    }
    /deep/ .el-dialog {
      width: 32%;
    }
  }
}
.commonPopup {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba($color: #000000, $alpha: 0.6);
}
.showPopup {
  right: 0px;
}
.hidePopup {
  right: -550px;
}
</style>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
